<template>
  <div>
    <n-modal v-model:show="showModal" transform-origin="center" :close-on-esc="handleClose" :mask-closable="false">
      <n-card style="width: auto;" title="项目清单" :bordered="false" size="huge" role="dialog" aria-modal="true" closable 
        @close="closePopup">
        <div class="cardStyle">
          <div class="searchTitle">
            <div class="projectName">项目名称:</div>
            <div class="inputStyle"> <n-input v-model:value="inputValue" size="tiny" type="text" placeholder="请输入" />
            </div>
            <div class="projectName">项目类型:</div>
            <div class="drawStyle">
              <n-select v-model:value="optionsValue" :options="options" />
            </div>

            <div class="projectName">所属年份:</div>
            <div class="drawStyle">
              <n-select v-model:value="optionsYear" :options="optionsT" />
            </div>
            <div class="searchButton">
              <n-button type="success">
                搜索
              </n-button>
            </div>
          </div>

          <div>
            <n-table :bordered="false" :single-line="false">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>项目名称</th>
                  <th>项目类型</th>
                  <th>所属年份</th>
                  <th>立项阶段</th>
                  <th>预拨阶段</th>
                  <th>验收阶段</th>
                  <th>结算阶段</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in tableData" :key="index">
                  <td>{{ item.xuHao }}</td>
                  <td>{{ item.xmmc }}</td>
                  <td>{{ item.xmlx }}</td>
                  <td>{{ item.ssnf }}</td>
                  <td>{{ item.lxjd }}</td>
                  <td>{{ item.ybjd }}</td>
                  <td>{{ item.ysjd }}</td>
                  <td>{{ item.jsjd }}</td>
                  <td><img src="../../../../assets/lingshui/u254.png" alt=""
                      style="width: 25px;height: 25px;cursor: pointer;" @click="ClickImg"></td>
                </tr>
              </tbody>
            </n-table>
          </div>

          <div class="clickPage">

            <div class="clickPage_one">
              <n-button type="primary">
                下一页
                <n-icon size="18px" color="black">
                  <ChevronForward></ChevronForward>
                </n-icon>
              </n-button>
            </div>

            <n-button type="primary">
              <n-icon size="18px" color="black">
                <ChevronBackOutline></ChevronBackOutline>
              </n-icon>
              上一页
            </n-button>
          </div>

        </div>

      </n-card>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useMainStore } from "../../../../store/index"
import { ChevronBackOutline, ChevronForward } from "@vicons/ionicons5";

const store = useMainStore()

const showModal = ref(false)
const handleClose = ref(false)

const inputValue = ref('')

const options = ref([
  {
    label: '全部',
    value: 'marina bay sands',
  },
  {
    label: '旱改水',
    value: "brown's hotel, london"
  },
  {
    label: '旱地',
    value: 'atlantis nahamas, nassau'
  },
  {
    label: '水田',
    value: 'the beverly hills hotel, los angeles'
  }
])

const optionsT = ref([
  {
    label: '全部',
    value: '全部'
  },
  {
    label: '2020',
    value: '2020'
  },
  {
    label: '2021',
    value: '2021'
  },
  {
    label: '2022',
    value: '2022'
  },
  {
    label: '2023',
    value: '2023'
  },
  {
    label: '2024',
    value: '2024'
  },
])

const tableData = ref([
  {
    xuHao: 1,
    xmmc: '莲都区紫金街道开潭村大岙建设用地复垦项目',
    xmlx: '旱改水',
    ssnf: '2021',
    lxjd: '已完成',
    ybjd: '已完成',
    ysjd: '已完成',
    jsjd: '已完成',
  },
  {
    xuHao: 2,
    xmmc: '莲都区紫金街道开潭村大岙建设用地复垦项目',
    xmlx: '旱改水',
    ssnf: '2021',
    lxjd: '已完成',
    ybjd: '已完成',
    ysjd: '已完成',
    jsjd: '已完成',
  },
  {
    xuHao: 3,
    xmmc: '莲都区紫金街道开潭村大岙建设用地复垦项目',
    xmlx: '旱改水',
    ssnf: '2021',
    lxjd: '已完成',
    ybjd: '已完成',
    ysjd: '已完成',
    jsjd: '已完成',
  },
  {
    xuHao: 4,
    xmmc: '莲都区紫金街道开潭村大岙建设用地复垦项目',
    xmlx: '旱改水',
    ssnf: '2021',
    lxjd: '已完成',
    ybjd: '已完成',
    ysjd: '已完成',
    jsjd: '已完成',
  },
])

const optionsValue = ref(options.value[0].label)
const optionsYear = ref(optionsT.value[0].label)

// 关闭弹窗
const closePopup = () => {
  showModal.value = false
  store.showModel = false
}

// 点击操作关闭弹窗
const ClickImg = () => {
  // showModal.value = false
  // store.showModel = false

  store.showModelB = true
}

watch(() => store.showModel, (newValue) => {
  showModal.value = newValue
}, { immediate: true })
</script>


<style lang="scss" scoped>
.cardStyle {
  width: 1500px;
  height: 600px;
  margin-top: 10px;
  user-select: none;

  .searchTitle {
    height: 50px;
    display: flex;
    align-items: center;

    .projectName {
      font-size: 14px;
      color: white;
    }

    .inputStyle {
      height: 100%;
      width: 200px;
      display: flex;
      align-items: center;
      margin-left: 20px;
      margin-right: 40px;
    }

    .drawStyle {
      height: 100%;
      width: 100px;
      display: flex;
      align-items: center;
      margin-left: 20px;
      margin-right: 40px;
    }

    .searchButton {
      width: 100px;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  .clickPage {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 20px;
    margin-right: 20px;

    .clickPage_one {
      margin-left: 20px;

    }
  }
}
</style>

<style>
.n-card.n-modal {
  background-color: #131836;
  border: 1px solid white;
}

.n-card>.n-card-header {
  padding: 10px;
  background-image: url("../../../../assets/lingshui/u200.svg");
  background-size: 100% 100%;
}

.n-modal .n-table th,
.n-drawer .n-table th {
  background-color: #1B2850;
}

.n-modal .n-table td,
.n-drawer .n-table td:nth-child(1n) {
  background-color: #213867;
}
</style>